iT邦幫忙

第 11 屆 iThome 鐵人賽

0
Mobile Development

用 Flutter 開發一個 Android App 吧系列 第 29

用 Flutter 開發一個 Android App 吧 - Day 29. 多語言切換

  • 分享至 

  • xImage
  •  

在多語言方面,可以用原生的 Dart intl 以及 Flutter 內建提供的 flutter_localizations 作支持。

不過我個人比較懶,所以直接使用別人整理好且很上手的套件。
要作到這功能個人經驗使用 flutter_i18n 是非常快速的。

引入套件以及建立翻譯檔

pubspec.yaml

day29-1.png

翻譯檔可以直接定義成 JSON 格式的

assets/i18n/en_US.json

{
    "login": {
        "login": "Login",
        "username": "Username",
        "password": "password"
    },
    ...
    "setting": {
        "theme": "Theme",
        "language": "Language",
        "switchLangMsg": "Switch language to {lang}"
    }
}

assets/i18n/zh_TW.json

{
    "login": {
        "login": "登入",
        "username": "使用者名稱/帳號",
        "password": "密碼"
    },
    ...
    "setting": {
        "theme": "主題",
        "language": "語言",
        "switchLangMsg": "切換語言成 {lang}"
    }
}

使用上需要在 MaterailApp.localizationsDelegates 加上需要的設定。

lib/main.dart

day29-2.png

小提醒:

用 Provider 管理設定

lib/stores/setting.dart

day29-3.png

SettingModel 裡加上 getter languagechangeLanguage

切換語言

在切換語言,另外寫了一個函數

  Future _changeLang(Language changedLang) async {
    setting.changeLanguage(changedLang);
    await FlutterI18n.refresh(context, langLocaleMap[changedLang]);
    showNotify(
      message: FlutterI18n.translate(
        context,
        "setting.switchLangMsg",
        {"lang": langLocaleMap[changedLang].toString()},
      ),
    );
  }

切換時(RadioListTile.onChanged)裡使用,作以下三個步驟:

  1. 調用狀態管理裡的 setting.changeLanguage 函數。
  2. await FlutterI18n.refresh(context, ...) 重新讀取新語言的翻譯檔案。
  3. showNotify 來顯示切換完成的訊息。

--

成果

day29-4.gif


上一篇
用 Flutter 開發一個 Android App 吧 - Day 28. 主題切換
下一篇
用 Flutter 開發一個 Android App 吧 - Day 30. Gitme-rebornv0.0.2 及鐵人賽總結
系列文
用 Flutter 開發一個 Android App 吧30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言